<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>品牌页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/cascader/cascader.css">
</head>
<body>
<h1>品牌页面</h1><hr>
<!--添加表格表单  start ---------->
<form class="layui-form" id="addForm"  lay-filter="addFormFilter"  style="display: none;padding: 5px 20px 0px  0px" enctype="multipart/form-data">
    <div class="layui-form-item">
        <lable class="layui-form-label">名称</lable>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name">
        </div>

    </div>
    <div class="layui-form-item">
        <lable class="layui-form-label">首字母</lable>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="firstLetter">
        </div>
    </div>

    <div class="layui-form-item">
        <lable class="layui-form-label">排序</lable>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="sort">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="showStatus" value="0" title="正常">
            <input type="radio" name="showStatus" value="1" title="已删除" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <lable class="layui-form-label">品牌logo</lable>
        <input type="hidden" id="logo" name="logo">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">品牌logo</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" width="400px" id="img1">
                <p id="demoText1"></p>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <lable class="layui-form-label">品牌描述</lable>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="brandStory">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block">
            <input type="text" id="a" name="categoryName" class="layui-input" readonly="readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!----------添加表格表单  end  --------->


<!--修改表格表单-->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter"  style="display:none;padding:50px 50px 0 0" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">品牌名称</label>
        <div class="layui-input-block">
            <input type="hidden" name="logo">
            <input type="hidden" name="brandId">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">首字母</label>
        <div class="layui-input-block">
            <input type="text" name="firstLetter" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">品牌种类</label>
        <div class="layui-input-block">
            <input type="text" name="sort" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="showStatus" value="0" title="正常">
            <input type="radio" name="showStatus" value="1" title="已删除" checked>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload2">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">品牌描述</label>
        <div class="layui-input-block">
            <input type="text" name="brandStory" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div>
    <label class="layui-form-label">品牌名称</label>
    <div class="layui-input-inline">
        <input type="text" name="name1" required  lay-verify="required" placeholder="请输入品牌名" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn layui-btn-radius" id="ch">查询</button><br>
</div>
<hr>

<%--导入数据页面--%>
<form class="layui-form" id="importForm"  style="display: none;padding: 5px 20px 0px  0px" enctype="multipart/form-data">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>文件上传</legend>
    </fieldset>
    <div class="layui-upload">
        <button class="layui-btn" id="upload3" type="button">上传文件</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>

</form>

<div>
    <button id="importExcel" class="layui-btn">批量上传</button>
    <button id="exportExcel" class="layui-btn">批量下载</button>
    <button id="deleteAll" class="layui-btn">删除选中</button>
    <button id="add" class="layui-btn">添加</button>
</div>
<table  id="demo" lay-filter="tableFilter"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>


<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script >
    layui.use(['table','form','laydate','upload','layer','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var  layer=layui.layer;
        var  upload=layui.upload;
        var $ =layui.jquery;
        //日期组件
        // laydate.render({
        //     elem:"#test1"
        // })

        laydate.render({
            elem:"#test2"
        })
        //表格动态展示
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/brand/selectAll' //数据接口
            ,page: true //开启分页
            ,limit:3
            ,limits:[3,6,9]
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'brandId', title: '编号', width:80, sort: true}
                ,{field: 'name', title: '品牌名', width:150}
                ,{field: 'firstLetter', title: '首字母', width:120}
                ,{field: 'sort', title: '品牌种类', width: 177}
                ,{field: 'showStatus', title: '品牌状态', width:120,templet:function(d){
                        if (d.showStatus!=0){
                            return  '删除';
                        } else{
                            return '正常';
                        }
                    }}
                ,{field: 'logo', title: '品牌logo', width:120}
                ,{field: 'brandStory', title: '品牌描述', width:120}
                ,{title:'操作',toolbar:'#barDemo'}


            ]]
        });

        //---条件查询 start----
        $("#ch").click(function () {

            table.reload('demo', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: $("[name=name1]").val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据

        });

        $("#add").click(function () {
            layer.open({
                type:1
                ,title:'添加页面'
                ,area: ['600px','700px']
                ,maxmin: true
                ,content:$("#addForm")
            })
        })


        $.ajax({
            url:"${pageContext.request.contextPath}/category/getCascaderNodeVos",
            success:function (data) {
                layui.config({
                    base: "${pageContext.request.contextPath}/layui/lay/mymodules/"
                }).use(['form',"jquery","cascader","form"], function(){
                    var $ = layui.jquery;
                    var cascader = layui.cascader;
                    var cas=cascader({
                        elem: "#a",
                        data:data,
                        showLastLevels: true,
                        success: function (valData,labelData) {
                            // 获取最后一个节点下标
                            console.log(valData[valData.length-1]);
                            console.info(labelData)
                        }
                    });
                });
            }
        })

        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: '${pageContext.request.contextPath}/oss/ossUpload',
                before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#img1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    console.info(res)
                    //上传成功
                    if(res.code == 0){
                        $("#logo").val(res.url)
                    }

                }
            });
        });


        //-----添加功能  start------

        //文件上传 start-----
        <%--upload.render({--%>
        <%--    elem: '#upload1' //绑定元素--%>
        <%--    // ,auto:false //auto:false,禁止自动上传,默认自动上传--%>
        <%--    // ,bindAction:'#btn1'--%>
        <%--    ,url: '${pageContext.request.contextPath}/brand/upload' //上传接口--%>
        <%--    ,done: function(res){--%>
        <%--        //上传完毕回调--%>
        <%--        form.val('addFormFilter',{--%>
        <%--            logo:res.newName--%>
        <%--        })--%>
        <%--    }--%>
        <%--    ,error: function(){--%>
        <%--        //请求异常回调--%>
        <%--        console.log("上传异常")--%>
        <%--    }--%>
        <%--});--%>
        //-----文件上传   end  -----


        //监听提交
        form.on('submit(addSubmit)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/brand/insert'
                ,data:$("#addForm").serialize()
                ,success:function(result){
                    if(result.flag){
                        layer.closeAll();//关闭添加界面的弹出层
                        $("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
                        layer.msg("添加成功!!!!");
                        table.reload("demo")//重载表格
                    }else{
                        layer.msg("添加异常!!!!")
                    }
                }
            })
            return false;
        });
        //------添加功能end-----

        //文件上传 start-----
        upload.render({
            elem: '#upload2' //绑定元素
            // ,auto:false //auto:false,禁止自动上传,默认自动上传
            // ,bindAction:'#btn1'
            ,url: '${pageContext.request.contextPath}/brand/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                form.val('updateFormFilter',{
                    logo:res.newName
                })
            }
            ,error: function(){
                //请求异常回调
                console.log("上传异常")
            }
        });
        //-----文件上传   end  -----

        //table事件监听器  控制监听  编辑和删除
        table.on('tool(tableFilter)',function (obj) {
            var data=obj.data;

            console.log(data)
            if (obj.event=='edit'){
                layer.open({
                    type:1
                    ,title:'修改页面'
                    ,content:$("#updateForm")

                })

                $.ajax({
                    url:'${pageContext.request.contextPath}/brand/selectOne'
                    ,data:'id='+obj.data.brandId
                    ,dataType:'json'
                    ,success:function (result) {

                        form.val('updateFormFilter',result)
                    }
                })
            }else if(obj.event=='del'){
                layer.confirm('确定要删除吗,亲!',function (index) {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/brand/delete'
                        ,data:'id='+obj.data.brandId
                        ,dataType:'json'
                        ,success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('demo');
                            }
                        }
                    })
                    layer.close(index);
                })

            }
        });
        //---修改功能  start------
        form.on('submit(updateSubmit)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/brand/update'
                ,data:$("#updateForm").serialize()
                ,dataType:'json'
                ,success:function(result){
                    if(result.flag){

                        //隐藏修改弹出层
                        layer.closeAll();
                        //提示修改层
                        layer.msg("修改成功!!!!");
                        //表格重载
                        table.reload("demo")
                    }
                }
            })
            return false;
        });
        //    ------修改功能结束--------

    //    ------批量上传Start-------
        $("#importExcel").click(function () {
            layer.open({
                type:1
                ,title:'导入数据页面'
                ,content:$("#importForm")
            })
            upload.render({
                elem: '#upload3' //绑定元素
                // ,auto:false //auto:false,禁止自动上传,默认自动上传
                // ,bindAction:'#btn1'
                ,accept:"file"
                ,url: '${pageContext.request.contextPath}/brand/importExcel' //上传接口
                ,done: function(res){
                    //上传完毕回调
                    layer.msg("导入数据成功!!!!");
                    layer.closeAll();//关闭添加界面的弹出层
                }
                ,error: function(){
                    //请求异常回调
                    layer.msg("导入数据失败!!!!");
                }
            });
        })

    //    ------批量上传End-------
    //    ------批量下载start-------


        $("#exportExcel").click(function () {
            window.location.href="${pageContext.request.contextPath}/brand/exportExcel"
            layer.msg("导出数据成功!!!!");

        })
    //    ------批量下载End-------




    })
</script>
</body>
</html>